<!-- 我的便利豆 -->
<template>
	<view class="MyBeanManag">
		<view class="manag-top radius20 f-background margin-bottom-20">
			<view class="manag-bean border-bottom dis-ali">
				<image class="manag-img" src="@/static/icon/bld.png" mode=""></image>
				<text class="font-weight-600">{{infoData.teamLeaderWalletRespVo.walletAmount || 0}}</text>
			</view>
			<view class="color3 size-28 dis-ali">
				<navigator url="/packageColonel/bean-manag/detail-list?type=1" hover-class="none" class="detail">便利豆明细
				</navigator>
				<navigator url="/packageColonel/bean-manag/detail-list?type=2" hover-class="none"
					class="detail u-border-left">充值明细</navigator>
			</view>
		</view>
		<view class="bean-manag f-background radius20">
			<view class="font-weight-600 color0 size-32">充值金额</view>
			<view class="manag">
				<view class="manag-for text-align" :class="{'border color': beanId == item.id}"
					v-for="(item,index) in beanList" :key="index" @click=" beanId = item.id">
					<view class="size-50 font-weight-600"><text class="size-32">￥</text>{{item.amont || 0}}</view>
					<view class="font-weight-400 size-24">购买{{item.beans || 0}}豆</view>
				</view>
			</view>
			<view class="instructions font-weight-400 color0 size-26">
				<view class="size-28">充值说明</view>
				<view>1、充值只可选择以上固定金额便利豆</view>
				<view>2、充值便利豆无法提现、无法找零</view>
				<view>3、充值便利豆只能在领火饭票小程序中使用</view>
			</view>
		</view>
		<view class="inset-bottom"></view>
		<view class="save poflb width100 f5-background">
			<view class="font-weight-400 color-8 size-26 dis">
				<text class="iconfont icon-xuanze size-36" v-if="!agreement"
					@click="agreement = agreement ? false : true"></text>
				<text class="iconfont icon-xuanzhong color size-36" v-else
					@click="agreement = agreement ? false : true"></text>
				<text class="margin-left-12" @click="agreement = agreement ? false : true">我已阅读并同意</text>
				<navigator class="color" hover-class="none" url="/packagePerson/user-agreement/user-agreement">
					《用户协议》</navigator> 与
				<navigator class="color" hover-class="none" url="/packagePerson/privacy-policy/privacy-policy">
					《隐私政策》</navigator>

			</view>
			<view class="save-title dis">
				<u-button type="primary"
					:customStyle="{width: '690rpx',height: '96rpx',borderRadius: '100rpx',marginTop: '0'}"
					color="#EB0000" @click="onConfirmRecharge">
					<text class="color-f font-weight-600 size-34">确定充值</text>
				</u-button>
			</view>
			<view class="inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { RechargeBeansConfig, TeamLeaderUser, RechargeOrder } from '@/api/index'
	export default {
		data() {
			return {
				agreement: false,
				beanId: 0, // 便利豆
				beanList: [],
				infoData: {}
			}
		},
		onLoad() {
			this.postTeamLeaderUser()
			this.postRechargeBeansConfig()
		},
		methods: {
			// 我的
			async postTeamLeaderUser() {
				const { code, data } = await TeamLeaderUser()
				if (code == "200") {
					this.infoData = data
				}
			},
			// 便利豆列表
			async postRechargeBeansConfig() {
				const { code, data } = await RechargeBeansConfig()
				if (code == '200') {
					this.beanList = data
				}
			},
			// 掉起支付
			async postRechargeOrder() {
				const _this = this
				const { code, data } = await RechargeOrder({ rechargeBeansId: this.beanId })
				if (code == '200') {
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: data.nonceStr,
						timeStamp: String(data.timestamp),
						package: data.packageStr,
						signType: 'MD5',
						paySign: data.paySign,
						success(res) {
							_this.postTeamLeaderUser()
							uni.showToast({
								title: '充值成功',
								icon: 'none',
								duration: 2000
							});
						},
						fail(res) {
							_this.disabled = false
							console.log(_this.disabled)
							console.log('res', res)
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
						},
					})
				}
			},
			onConfirmRecharge() {
				let tis = ''
				if (!this.agreement) tis = '仔细阅读并同意《用户协议》与《隐私政策》'
				else if (!this.beanId) tis = '请选择需要充值的档位'
				if (tis) {
					uni.$u.toast(tis)
					return
				}
				this.postRechargeOrder()
			}
		}
	}
</script>

<style lang="scss">
	.MyBeanManag {
		padding: 20rpx;
		color: #444444;
		padding-bottom: 260rpx;

		.bean-manag {
			display: grid;
			grid-gap: 37rpx;
			padding: 32rpx 24rpx 44rpx;
		}

		.manag-top {
			.manag-bean {
				padding: 56rpx 32rpx 52rpx;

				.manag-img {
					width: 46rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.font-weight-600 {
					font-size: 54rpx;
				}
			}

			.detail {
				width: 50%;
				text-align: center;
				padding: 32rpx 0;
			}
		}

		.manag {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 16rpx;
		}

		.instructions {
			display: grid;
			grid-gap: 24rpx;
		}

		.manag-for {
			border: 1px solid rgba(99, 87, 82, 0.17);
			border-radius: 16rpx;
			padding: 22rpx 0;
		}

		.save {
			.save-title {
				padding: 42rpx 0 36rpx;

			}

			.font-weight-400 {
				padding-top: 24rpx;
			}
		}
	}
</style>